<template>
  <view class="notices" v-if="text">
    <view class="icon">
      <image class="image" src="@/static/svg/icon_notices.svg" mode="aspectFit" />
    </view>
    <view class="text"><up-notice-bar :text="text" :icon="false" bgColor="transparent" fontSize="24rpx" color="#666"></up-notice-bar></view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getNoticesApi } from '@/api/app'
const text = ref(null)
onMounted(()=> {
  getNoticesApi().then((res)=> {
    text.value = res
  })
})
</script>

<style lang="scss" scoped>
.notices{
  background:  #fff;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  height: 64rpx;
  padding: 0 32rpx;

  z-index: 5;
  .icon{
    margin-right: 8rpx;
    width: 32rpx;
    height: 32rpx;
    .image{
      width: 32rpx;
      height: 32rpx;
    }
  }
  .text{
    flex: 1;
    font-weight: 400;
    font-size: 24rpx;
    color: #666666;

  }
}
@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
</style>
